<template>
	<view class="xuncha-file-index">
		<view class="xuncha-file-card">
			<uni-card>
				<view class="" style="display: flex;">
					<view class="" style="flex:1">
						<view class="yhrw-list-item">
							<uni-title style="padding: 0rpx;" type="h3" title="案件编号:日常任务11111111"></uni-title>
						</view>
						<view class="yhrw-list-item">
							<view class="yhrw-list-name">派遣时间:</view>
							<text class="yhrw-list-text">{{date | date('yyyy-mm-dd hh:MM:ss')}}</text>
						</view>
						<view class="yhrw-list-item">
							<view class="yhrw-list-name">截至时间:</view>
							<text class="yhrw-list-text">{{date | date('yyyy-mm-dd hh:MM:ss')}}</text>
						</view>
						<view class="yhrw-list-item">
							<view class="yhrw-list-name">处置要求:</view>
							<text class="yhrw-list-text">日常任务33</text>
						</view>
						<view class="yhrw-list-item">
							<view class="yhrw-list-name">事发位置:</view>
							<text class="yhrw-list-text">未开始</text>
						</view>
					</view>
					<!-- <view class="" style="width: 200rpx;display: flex;align-items: center;">
						<view class="" style="display: flex;flex-direction: column;align-items: center;">
							<button style="width: 200rpx;height: 80rpx;" @click="view">导航</button>
							<button style="width: 200rpx;height: 80rpx;margin-top: 20rpx;" @click="update">办理</button>
						</view>
					</view> -->
				</view>
			</uni-card>
			<uni-card>
				<view class="" style="display: flex;">
					<view class="" style="flex:1">
						<view class="yhrw-list-item">
							<uni-title style="padding: 0rpx;" type="h3" title="案件编号:日常任务11111111"></uni-title>
						</view>
						<view class="yhrw-list-item">
							<view class="yhrw-list-name">派遣时间:</view>
							<text class="yhrw-list-text">{{date | date('yyyy-mm-dd hh:MM:ss')}}</text>
						</view>
						<view class="yhrw-list-item">
							<view class="yhrw-list-name">截至时间:</view>
							<text class="yhrw-list-text">{{date | date('yyyy-mm-dd hh:MM:ss')}}</text>
						</view>
						<view class="yhrw-list-item">
							<view class="yhrw-list-name">处置要求:</view>
							<text class="yhrw-list-text">日常任务33</text>
						</view>
						<view class="yhrw-list-item">
							<view class="yhrw-list-name">事发位置:</view>
							<text class="yhrw-list-text">未开始</text>
						</view>
					</view>
				</view>
			</uni-card>
		</view>

		<view class="" style="margin: 15px;">
			<uni-uform v-model="form" ref="uform" :config="config" :rules="rules" >
			</uni-uform>
			<view class="" style="display: flex;justify-content: space-around;">
				<uni-button @click="sub">反馈</uni-button>
				<uni-button>拍照</uni-button>
			</view>
		</view>
		<view class="" style="margin: 15px;">
			<view class="">
				<view class="">
					<uni-button>上报</uni-button>
				</view>
				<view class="" style="display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: 20rpx;">
					<view class="" style="width: 49.5%;">
						<image src="/static/images/index/banner.png" mode="widthFix"></image>
					</view>
					<view class="" style="width: 49.5%;">
						<image src="/static/images/index/banner.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="">
				<view class="">
					<uni-button>核实</uni-button>
				</view>
				<view class="" style="display: flex;flex-wrap: wrap;margin-top: 20rpx;justify-content: space-between;">
					<view class="" style="width: 49.5%;">
						<image src="/static/images/index/banner.png" mode="widthFix"></image>
					</view>
					<view class="" style="width: 49.5%;">
						<image src="/static/images/index/banner.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				is_active: 'richang',
				date: new Date(),
				form: { // 建议申明属性与config数组的name保持一致
					jg: 0,
					blsm: 1,
				},
				config: [{
						name: 'jg',
						label: '结果',
						component: 'uni-data-select', // 注册组件同名 全局的一般是component文件夹自动注册，自定义组件可以放这个文件夹
						extra: { // 组件属性
							// placeholder: "请选择设施大类",
							localdata: [{
									value: 0,
									text: "篮球"
								},
								{
									value: 1,
									text: "足球"
								},
								{
									value: 2,
									text: "游泳"
								},
							]
						},
						event: { //推荐箭头函数这样方便和组件交互 组件方法 与组件库方法保持一致 自定义组件也保持一致 
							change: function(e) {
								console.log(e)
							},
							input: function(e) {
								console.log(e)
							},
							maskClick: function(e) {
								console.log(e, 'ss')
							},
						}
					},
					{
						name: 'blsm',
						label: '办理说明',
						component: 'uni-easyinput',
						extra: {
							type: "textarea",
							placeholder: "请输入办理说明",
						},
						event: {
							change: (e) => { // 操作 form字段的示例 改变config

							}
						}
					},
				],
				rules: {
					jg: {
						rules: [{
							required: true,
							errorMessage: '不能为空',
						}]
					}
				},
			}
		},
		methods: {
			rwclick(name) {
				this.is_active = name;
			},
			backClick() {
				uni.navigateBack()
			},
			sub() {
				let form = this.$refs.uform.getForm()
				form.validate().then(res => {
					console.log('表单数据信息：', res, this.form);
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
		}
	}
</script>

<style lang="scss">
	$nav-height: 30px;

	.box-bg {
		background-color: #F5F5F5;
		padding: 5px 0;
	}

	.city {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		// width: 160rpx;
		margin-left: 4px;
	}

	.input-uni-icon {
		line-height: $nav-height;
	}

	.xuncha-file-index {
		.xuncha-file-btn {
			display: flex;

			button {
				width: 50%;
			}

			.is_active {
				background-color: #0055ff;
				color: #F5F5F5;
			}

			.no_active {
				background-color: #F5F5F5;
				color: #000;
			}
		}

		.xuncha-file-card {
			.yhrw-list-item {
				display: flex;

				.yhrw-list-name {
					width: 125rpx;
				}

				.yhrw-list-text {
					flex: 1;

				}
			}
		}
	}
</style>